<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Visualization: ExportDataTable - Institute for Systems Biology Visualizations</title>

    <script src="http://code.google.com/js/codesite.pack.01312008.js" type="text/javascript"></script>
    <link href="http://code.google.com/css/codesite.pack.01312008.css" type="text/css" rel="stylesheet">

    <!--[if IE]><link rel="stylesheet" type="text/css" href="/css/iehacks.css" /><![endif]-->

    <script src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/branches/1.0.1/src/main/js/load.js"></script>
</head>

<body class="gc-documentation">

<div id="gc-container">
<a name="top"></a>

<div id="codesiteContent">

<a name="gc-topnav-anchor"></a>

<div id="gc-topnav">
    <h1>Visualization: ExportDataTable</h1>

    <ul id="docs" class="gc-topnav-tabs">

        <li id="home_link">
            <a href="http://systemsbiology.org/" title="Institute for Systems Biology">Home</a>
        </li>

        <li id="docs_link">
            <a href="http://groups.google.com/group/systemsbiology-visualizations/web/visualizations-summary" class="selected"
               title="Systems Biology Visualizations Documentation">Docs</a>
        </li>

        <li id="code_link">
            <a href="http://code.google.com/p/systemsbiology-visualizations/" title="Code Repository In Google Code">Code</a>
        </li>

        <li>
            <a href="http://groups.google.com/group/systemsbiology-visualizations" title="Systems Biology Visualization Group">Group</a>
        </li>
    </ul>
</div>
<div class="g-section g-tpl-170">

<div id="gc-pagecontent">

<div class="toc">
    <ol>
        <li><a href="#Overview">Overview</a>
        <li><a href="#Example">Example</a>
        <li><a href="#Loading">Loading</a>
        <li><a href="#Data_Format">Data Format</a>
        <li><a href="#Configuration_Options">Configuration Options</a>
        <li><a href="#Methods">Methods</a>
        <li><a href="#Events">Events</a>
        <li><a href="#Data_Policy">Data Policy</a>
    </ol>
</div>

<h1><a name="Overview" id="Overview"></a>Overview</h1>

<p>
The <code>ExportDataTable</code> is a Visualization that exposes the data in a specified character-delimited format (defaults to CSV).  It is rendered within the browser using HTML.
<p>
    By: Hector Rovira for the Institute for Systems Biology (ISB)<br/>
    <strong>This work was made possible by funding from "The Systems Approach to Immunity and Inflammation Contract" (HHSN272200700038C) from the National Institute of Allergy and Infectious Diseases (NIAID)</strong>
</p>

<h1><a name="Example" id="Example"></a>Example</h1>

<div id="container">
    <div id="exportControlContainers">
        <a href='#' onclick="return exportAs(',');">Export As CSV</a>
        <a href='#' onclick="return exportAs('\t');">Export As TSV</a>
        <a href='#' onclick="return clearExportDataTableContainer();">Close</a>
    </div>

    <div id="table_container">
    </div>

    <div id="exportDataTableContainer">
    </div>
</div>

<script type="text/javascript">
    google.load("prototype", "1.6.0.2");
    google.load("visualization", "1", {packages:["table"]});
</script>
<script type="text/javascript">
    systemsbiology.load("visualization", "1.0.1", {packages:["exportDataTable"]});
</script>
<script type="text/javascript">
    var data = new google.visualization.DataTable();

    function drawTable() {
        data.addColumn("string", "Name");
        data.addColumn("number", "Height");
        data.addColumn("number", "Age");
        data.addColumn("boolean", "Girl?");
        data.addRows(4);
        data.setCell(0, 0, "Hector");
        data.setCell(0, 1, 67);
        data.setCell(0, 2, 33);
        data.setCell(0, 3, false);
        data.setCell(1, 0, "Isola");
        data.setCell(1, 1, 30);
        data.setCell(1, 2, 3);
        data.setCell(1, 3, true);
        data.setCell(2, 0, "Mindy");
        data.setCell(2, 1, 64);
        data.setCell(2, 2, 33);
        data.setCell(2, 3, true);
        data.setCell(3, 0, "Jacek");
        data.setCell(3, 1, 25);
        data.setCell(3, 2, 1);
        data.setCell(3, 3, false);

        var table = new google.visualization.Table($("table_container"));
        table.draw(data);
    }

    function exportAs(columnSeparator) {
        $("exportDataTableContainer").innerHTML = "";

        var exportDataTable = new org.systemsbiology.visualization.ExportDataTable($("exportDataTableContainer"));
        exportDataTable.draw(data, { columnSeparator: columnSeparator, rowSeparator: "\n" });
        return false;
    }

    function clearExportDataTableContainer() {
        $("exportDataTableContainer").innerHTML = "";
        return false;
    }

    google.setOnLoadCallback(drawTable);
</script>

<pre class="prettyprint">
&lt;html&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    google.load("prototype", "1.6.0.2");
    google.load("visualization", "1", {packages:["table"]});
&lt;/script&gt;
&lt;script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/branches/1.0.1/src/main/js/load.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    systemsbiology.load("visualization", "1.0.1", {packages:["exportDataTable"]});
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    var data = new google.visualization.DataTable();

    function drawTable() {
        data.addColumn("string", "Name");
        data.addColumn("number", "Height");
        data.addColumn("number", "Age");
        data.addColumn("boolean", "Girl?");
        data.addRows(4);
        data.setCell(0, 0, "Hector");
        data.setCell(0, 1, 67);
        data.setCell(0, 2, 33);
        data.setCell(0, 3, false);
        data.setCell(1, 0, "Isola");
        data.setCell(1, 1, 30);
        data.setCell(1, 2, 3);
        data.setCell(1, 3, true);
        data.setCell(2, 0, "Mindy");
        data.setCell(2, 1, 64);
        data.setCell(2, 2, 33);
        data.setCell(2, 3, true);
        data.setCell(3, 0, "Jacek");
        data.setCell(3, 1, 25);
        data.setCell(3, 2, 1);
        data.setCell(3, 3, false);

        var table = new google.visualization.Table($("table_container"));
        table.draw(data);
    }

    function exportAs(columnSeparator) {
        $("exportDataTableContainer").innerHTML = "";

        var exportDataTable = new org.systemsbiology.visualization.ExportDataTable($("exportDataTableContainer"));
        exportDataTable.draw(data, { columnSeparator: columnSeparator, rowSeparator: "\n" });
        return false;
    }

    function clearExportDataTableContainer() {
        $("exportDataTableContainer").innerHTML = "";
        return false;
    }

    google.setOnLoadCallback(drawTable);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
    &lt;div id="exportControlContainers"&gt;
        &lt;a href='#' onclick="return exportAs(',');"&gt;Export As CSV&lt;/a&gt;
        &lt;a href='#' onclick="return exportAs('\t');"&gt;Export As TSV&lt;/a&gt;
        &lt;a href='#' onclick="return clearExportDataTableContainer();"&gt;Close&lt;/a&gt;
    &lt;/div&gt;

    &lt;div id="table_container"&gt;
    &lt;/div&gt;

    &lt;div id="exportDataTableContainer"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>

<h1><a name="Loading" id="Loading"></a>Loading</h1>

<p>
   The <code>systemsbiology.load</code> package name is <code>"exportDataTable"</code>
</p>

<pre class="prettyprint">&lt;script type="text/javascript" src="http://systemsbiology-visualizations.googlecode.com/svn/branches/1.0.1/src/main/js/load.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    systemsbiology.load("visualization", "1.0.1", {packages:["exportDataTable"]});
&lt;/script&gt;</pre>

<p>
    The visualization control's class name is <code>org.systemsbiology.visualization.ExportDataTable</code>
</p>

<pre class="prettyprint">var visualization = new org.systemsbiology.visualization.ExportDataTable(container);</pre>

<p/>

<h1><a name="Data_Format" id="Data_Format"></a>Data Format</h1>

<p>
    This visualization supports all data formats.
</p>

<h1><a name="Configuration_Options" id="Configuration_Options"></a>Configuration Options</h1>

<p>
<table>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Default</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>columnSeparator</td>
        <td>string</td>
        <td>","</td>
        <td>The value to be placed between column values</td>
    </tr>
    <tr>
        <td>rowSeparator</td>
        <td>string</td>
        <td>"\n" (carriage return)</td>
        <td>The value to be placed between rows</td>
    </tr>
</table>

<h1><a name="Methods" id="Methods"></a>Methods</h1>

<p>
<table>
    <tr>
        <th>Method</th>
        <th>Return Type</th>
        <th>Description</th>
    </tr>
    <tr>
        <td><code>draw(data, options)</code></td>
        <td>none</td>
        <td>Draws a textarea element containing the data in specified character-delimited format</td>
    </tr>
</table>

<h1><a name="Events" id="Events"></a>Events</h1>
<p>None supported</p>

<h1><a name="Data_Policy" id="Data_Policy"></a>Data Policy</h1>
<p>
    All code and data are processed and rendered in the browser. No data is sent to any server.
</p>

</div>
</div>

</div>

<div id="gc-footer" dir="ltr">
    <div id="gc-footer-img"></div>
    <div class="text">

        &copy;2008 Institute for Systems Biology -
        <a href="http://www.systemsbiology.org">ISB Home</a> -
        <a href="http://code.google.com/p/systemsbiology-visualizations/">Code Home</a>
    </div>
</div>
<!-- end gc-footer -->

</div>
<!-- end gc-containter -->
</body>
</html>

